<template>
  <div>
    <div class="dataList">
      <div class="scrollT">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          :class="[item.userName == userName && 'text-a-r']"
        >
          <div class="box-shadow item">
            <span><i class="el-icon-user"></i> {{ item.userName }}</span>
            <span> 时间：{{ item.time }}</span>
            <div>{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-input
      placeholder="请输入内容"
      v-model="value"
      class="input-with-select"
    >
      <el-button
        slot="append"
        icon="el-icon-chat-dot-square"
        @click="ValSend"
      ></el-button>
    </el-input>
  </div>
</template>
<script>
export default {
  props: {
    roomName: {
      type: String,
      defined: "",
    },
    userName: {
      type: String,
      defined: "",
    },
  },
  watch: {
    dataList() {
      this.$nextTick(() => {
        let _boxS = document.querySelector(".dataList");
        let _scrollT = document.querySelector(".scrollT");
        _boxS.scrollTop = _scrollT.scrollHeight;
      });
    },
  },
  data() {
    return {
      value: "",
      dataObj: {},
      dataList: [],
    };
  },
  mounted() {},
  methods: {
    isValue() {
      if (this.value) return true;
      else return false;
    },
    ValSend() {
      if (!this.isValue()) return;
      let _data = {
        roomName: this.roomName,
        userName: this.userName,
        value: this.value,
        time: new Date().toLocaleString(),
      };
      this.$socket.emit("text", _data);
      this.value = "";
    },
  },
  sockets: {
    // 文本消息
    text(data) {
      //   this.dataObj = data;
      this.dataList.push(data);
    },
  },
};
</script>
<style scope>
.box-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.text-a-r {
  text-align: right;
}
.dataList {
  font-size: 14px;
  min-height: 280px;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.dataList div.item {
  display: inline-block;
  /* width: 75%; */
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
.dataList .item span:nth-child(1),
.dataList .item span:nth-child(2) {
  color: #606266ad;
}
.dataList .item div {
  padding: 10px 0 0 0;
}
</style>
